/**
 * 商务卡展示
 */
import React  from 'react'
import { messages, queryCurrencyPrecision, formatNumber } from 'share/common'
import { Row, Col, Popconfirm, Input, message, Button } from 'antd';
import Condition from 'components/condition'
const { If } = Condition;
import moment from 'moment'


import 'styles/my-account/components/business-card.scss'
import expenseService from 'containers/my-account/expense.service'

class ExpenseBusinessCard extends React.Component{
  constructor(props){
    super(props);
    this.state = {

    }
  }

  formatTime = (time) => {
    return `${time.substr(0, 2)}:${time.substr(2, 2)}:${time.substr(4, 2)}`
  };

  //商务卡消费类型
  getConsumptionType = (code) => {
    switch (code) {
      case '00':
        return messages('my-account.key89'/*一般消费*/);
      case '01':
        return messages('my-account.key90'/*预借现金*/);
      case '12':
        return messages('my-account.key91'/*预借现金退货*/);
      case '20':
        return messages('my-account.key92'/*一般消费退货*/);
      case '60':
        return messages('my-account.key93'/*还款及费用*/);
    }
  };

  //保存备注
  handleSaveRemark = (e, info) => {
    let id = info.id;
    let remark = info.remark;
    let value = e.target.value;
    value !== remark && expenseService.updateBusinessCardRemark(id, value)
      .then(() => {
        message.success(messages('common.operate.success')/*操作成功*/);
      });
  };

  renderCardDetailRow = (label, value) => (
    <Col span={12} className="detail-row">
      <span className="detail-row-label">{label}：</span>&nbsp;{value}
    </Col>
  );

  handleDelete = (card, index) => {
    this.props.handleDeleteCard(card, index);
  };

  // 数组扁平化，为了支持IE浏览器
  flat = (arr = [], depth) => {
    if (depth == undefined) {
      depth = 1
    };
    while(arr.some(item => (Array.isArray(item) && depth > 0))) {
      // ...arr每次只能展开一层
      arr = [].concat(...arr)
      // 限制层级
      depth--
    }
    return arr
  };

  render() {
    // cardList:公务卡消费数组，被选中的公务卡消费明细在数组元素的checkedRelation里
    const { currencyPrecision, readOnly, cardList, invoiceOID } = this.props;
    console.log(cardList,'cardList');
    // const tempShowList = cardList.map((record, recordIndex) => {
    //   const keys = Object.keys(record.relationMap)
    //   return keys.map((key) => {
    //     return record.relationMap[key].map((relation) => {
    //       record.recordId = record.id
    //       relation.relationId = relation.id
    //       if (relation.checked) {
    //         return {
    //           status: key,
    //           ...record,
    //           ...relation
    //         }
    //       }
    //     }).filter(item => item)
    //   }).filter(item => item)
    // })
    // const showList = this.flat(tempShowList, 2)
    console.log(cardList,'cardList12222222222222');
    return (
      <section>
        {
          cardList.map((info, index) => {
              return (<div className="expense-business-card">
                <Row>
                  <Col span={6} className="card-amount-area">
                    <div className="card-name">{'滴滴消费'}</div>
                    <div className="card-currency">{'实付金额'}</div>
                    <div className="card-amount">
                      {formatNumber(info.companyRealPay.toFixed(queryCurrencyPrecision(info.companyRealPay)))}
                    </div>
                    <div className="card-currency">{'车型'}</div>
                    <div className="card-amount">
                      {info.requireLevelMeaning}
                    </div>
                  </Col>
                  <Col span={18} className="card-detail-area">
                    <div className="card-acp">{info.acpName}</div>
                    <If value={!readOnly}>
                      <Popconfirm
                        title={messages('common.confirm.delete')}
                        placement="bottomRight"
                        onConfirm={() => this.handleDelete(info, index)}>
                        <Button
                          icon="delete"
                          size="small"
                          type="primary"
                          className="button-delete"
                          onClick={e => {e.stopPropagation();}}>
                          {messages('common.delete')/*删除*/}
                        </Button>
                      </Popconfirm>
                    </If>
                    <Row className="card-detail" gutter={10}>
                      {this.renderCardDetailRow(messages('my-account.key124'/*交易日期*/), moment(`${info.createTime}`).format('YYYY-MM-DD'))}
                      {this.renderCardDetailRow('城市', `${info.cityName}`)}
                      {this.renderCardDetailRow('出发时间', moment(`${info.departureTime}`).format('YYYY-MM-DD'))}
                      {this.renderCardDetailRow('到达时间', moment(`${info.finishTime}`).format('YYYY-MM-DD'))}
                      {this.renderCardDetailRow('出发地', `${info.startName}`)}
                      {this.renderCardDetailRow('目的地', `${info.endName}`)}
                      {/* <If value={readOnly}>
                        {this.renderCardDetailRow(messages('common.remark'), info.remark || '-')}
                      </If> */}
                    </Row>
                    {/* <If value={!readOnly}>
                      <Input
                        placeholder={messages('my-account.key128')}
                        maxLength="200"
                        defaultValue={info.remark}
                        onBlur={(e) => this.handleSaveRemark(e, info)}/>
                    </If> */}
                  </Col>
                </Row>
              </div>);
            }
          )
        }
      </section>
      
    );
  }
}

ExpenseBusinessCard.propTypes = {
  cardList: React.PropTypes.array, //商务卡列表
  cardIndex: React.PropTypes.number, //当前商务卡index
  currencyPrecision: React.PropTypes.number, //币种精度
  invoiceOID: React.PropTypes.string, //费用OID
  readOnly: React.PropTypes.bool, //费用是否只读
  handleDeleteCard: React.PropTypes.func, //删除商务卡的导入
  businessCardType: React.PropTypes.string // 一对多或是多对一
};

export default ExpenseBusinessCard;
